<template>
    <Modal v-model="visible" :title=title :width="width" @on-ok="setSelectUser">
        <div class="layout-content">
            <Row>
                <i-col span="7">
                    <Card style="height:400px;overflow:auto;">
                        <p slot="title">机构列表</p>
                        <Tree :data="baseData" @on-select-change="seleteNode" ref="tree"/>
                    </Card>
                </i-col>
                <i-col span="16" offset="1">
                    <Card style="height:400px;overflow:auto;">
                        <p slot="title">用户列表</p>
                        <Form :label-width="60" inline>
                            <Form-item label="姓名">
                                <Input v-model="queryParam.name" placeholder="" style="width: 150px" />
                            </Form-item>
                            <Form-item>
                                <Button type="primary" style="" @click="searchQuery">查询</Button>
                                <Button type="primary" style="margin-left: 8px" @click="searchReset">重置</Button>
                            </Form-item>
                        </Form>
                        <div style="margin-top: 20px">
                            <Table :columns="columns" :data="tableData" :loading="Loading">
                            </Table>
                            <Page :total="dataCount" :page-size="pageSize" show-total class="paging"
                                  @on-change="handleTableChange"></Page>
                        </div>
                    </Card>
                </i-col>
            </Row>
        </div>
    </Modal>
</template>

<script>
    import {postAction} from '@/api/request'
    import {CommonMixin} from '@/views/common/js/CommonMixin'

    export default {
        name: "application-person",
          mixins: [CommonMixin],
          components: {
            },
        data() {
            return {
                tabName: "name1",
                handleNum: 99,
                scrollable: true,
                title: "审批人选择",
                visible: false,
                disableSubmit: false,
                width: 1000,
                height: 400,
                model: {},
                familyInfo: {},
                buttonList: [],
                key: "",
                Loading: false,
                type:"",
                baseData: [],
              url: {
                list: "/api/ac/subsistence/monitorService/getUserByAreaPageList",
                tree: "/api/ac/subsistence/monitorService/queryAreaTree"
              },
              currentId: '',
              currentName: '',
              columns: [
                {
                  title: '',
                  key: 'id',
                  width: 50,
                  align: 'center',
                  render: (h, params) => {
                    let id = params.row.id;
                    let name=params.row.name;
                    let flag = false;
                    if (this.currentId === id) {
                      flag = true
                    }
                    let self = this
                    return h('div', [
                      h('Radio', {
                        props: {
                          value: flag
                        },
                        on: {
                          'on-change': () => {
                            self.currentId = id;
                            self.currentName=name;
                          }
                        }
                      })
                    ])
                  }
                },
                {
                  title: '姓名',
                  align: 'center',
                  key: 'name',
                  width: 150,
                },
                {
                  title: '手机号码',
                  align: 'center',
                  key: 'mobile',
                  width: 150,
                },
                {
                  title: '所属区划',
                  align: 'left',
                  key: 'azaa0002',
                }
              ],
              tableData: [],
              formData: {},
            }
        },
        methods: {
            show() {
                this.visible = true;
            },
            cancel() {
                this.visible = false;
            },
            seleteNode(data){
                let azaa0001=data[0].azaa0001;
                this.queryParam.azaa0001=azaa0001;
                this.loadData();
            },
            loadTree(){
              let dataParam = {}
              let url=this.url.tree;
              postAction(url, dataParam).then((res) => {
                if(res.data.errcode==9999) {
                  this.$Message.error(res.data.errmsg);
                } else {
                  this.baseData=res.data.data.data;
                }
              }).finally(() => {

              })
            },
            setSelectUser(){
              let data = {
                currentName:this.currentName,
                currentId:this.currentId
              };
              this.$parent.setSearchUser(data);
            }
        },
        created() {
            //this.height = 400;
            this.loadTree();
            this.loadData();
        }
        ,
    }
</script>

<style scoped>
    .layout-content{
        min-height: 200px;
        margin-top: 15px;
        background: #fff;
        border-radius: 4px;
    }
    .layout-content-main{
        padding: 10px;
    }

    #inforDiv {
        width: 100%;
        position: relative;
        margin-top: 20px;
        min-height: 200px;
    }

    #examinationButtonDiv {
        position: relative;
        margin-top: 20px;
        width: 100%;
        text-align: center;
    }

    .overflowContent {
        position: relative;
        width: 100%;
        overflow-y: auto;

    }

    /deep/ .ivu-modal-body {
        padding-top: 0px;
    }

</style>
